var VPage = (function () {

    // html模板信息 no-gap
    var template = '<ul class="pagination  info">' +
        '<li class="page-item {{ setButtonClass(0) }}"><a href="javascript:;" class="page-link" @click="prvePage(pageIndex)">上一页</a></li> ' +
        '<li v-for="index in indexs" class= "page-item"  :class="{ active: pageIndex == index }"> ' +
        '<a class="page-link" href="javascript:;" @click = "btnClick(index)" > {{ index < 1 ? "..." : index }}</a> ' +
        '</li> ' +
        '<li class="page-item {{ setButtonClass(1) }}" > <a href="javascript:;" class="page-link" @click="nextPage(pageIndex)">下一页</a></li> ' +
        '</ul>';

    return {
        template: template,
        props: ['pageIndex', 'pageCount'],
        computed: {
            indexs: function () {
                var left = 1
                var right = this.pageCount
                var ar = []
                if (this.pageCount >= 11) {
                    if (this.pageIndex > 5 && this.pageIndex < this.pageCount - 4) {
                        left = this.pageIndex - 5
                        right = this.pageIndex + 4
                    } else {
                        if (this.pageIndex <= 5) {
                            left = 1
                            right = 10
                        } else {
                            right = this.pageCount
                            left = this.pageCount - 9
                        }
                    }
                }
                while (left <= right) {
                    ar.push(left)
                    left++
                }
                if (ar[0] > 1) {
                    ar[0] = 1;
                    ar[1] = -1;
                }
                if (ar[ar.length - 1] < this.pageCount) {
                    ar[ar.length - 1] = this.pageCount;
                    ar[ar.length - 2] = 0;
                }
                return ar
            }
        },
        methods: {
            // 页码点击事件
            btnClick: function (data) {

                if (data < 1) return;
                if (data != this.pageIndex) {

                    this.pageIndex = data;
                    this.$emit('page-click', data);
                }
            },
            // 下一页
            nextPage: function (data) {
                if (this.pageIndex >= this.pageCount) return;
                this.btnClick(this.pageIndex + 1);
            },
            // 上一页
            prvePage: function (data) {
                if (this.pageIndex <= 1) return;
                this.btnClick(this.pageIndex - 1);
            },
            // 设置按钮禁用样式
            setButtonClass: function (isNextButton) {
                if (isNextButton) {
                    return this.pageIndex >= this.pageCount ? "disabled" : ""
                }
                else {
                    return this.pageIndex <= 1 ? "disabled" : ""
                }
            }
        }
    }
}());